<template>
  <div class="departments">
    <!-- 卡片 -->
    <el-card class="box-card">
      <!-- tabs -->
      <el-tabs v-model="activeName">
        <el-tab-pane label="组织架构" name="first">
          <!-- 栅格布局 -->
          <el-row type="flex" class="row-bg" justify="space-between">
            <el-col :span="6">
              <h4>江苏传智播客教育科技有限公司</h4>
            </el-col>
            <el-col :span="6" class="right-col">
              <span class="linder">负责人</span>
              <!-- 下拉菜单 -->
              <el-dropdown>
                <span class="el-dropdown-link">
                  操作<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <!-- button 文字按钮-->
                    <el-button type="text" @click="dialogFormVisible = true"
                      >添加子部门</el-button
                    >
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </el-row>
          <el-divider />
          <!-- tree -->
          <el-tree
            :data="departs"
            :props="defaultProps"
            @node-click="handleNodeClick"
          >
            <!-- 插槽自定义 -->
            <template #default="{ data }">
              <el-row type="flex" class="row-bg" justify="space-between">
                <el-col :span="6">
                  {{ data.name }}
                </el-col>
                <el-col :span="6" class="right-col">
                  <span class="linder">{{ data.manager }}</span>
                  <!-- 下拉菜单 -->
                  <el-dropdown>
                    <span class="el-dropdown-link">
                      操作<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item>
                        <!-- button 文字按钮-->
                        <el-button type="text" @click="addChildren(data)"
                          >添加子部门</el-button
                        >
                      </el-dropdown-item>
                      <el-dropdown-item>
                        <!-- button 文字按钮-->
                        <el-button type="text" @click="enterEdit(data)">
                          查看部门</el-button
                        >
                      </el-dropdown-item>
                      <el-dropdown-item>
                        <!-- button 文字按钮-->
                        <el-button type="text" @click="removeItem(data)"
                          >删除部门</el-button
                        >
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-col>
              </el-row>
            </template>
          </el-tree>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 弹框组件 -->
    <DepDialog
      :form="form"
      @cancel="onCancel"
      @getData="getData"
      :visible.sync="dialogFormVisible"
    ></DepDialog>
  </div>
</template>

<script>
import DepDialog from './components/DepDialog.vue'
import {
  getDepartments,
  getDepartmentById,
  delDepartmentById
} from '@/api/departments'

// 转树的方法
function formatData (list, pid) {
  return list.filter(v => {
    if (v.pid === pid) {
      v.children = formatData(list, v.id)
      return true
    } else {
      return false
    }
  })
}
export default {
  components: {
    DepDialog
  },
  name: 'Departments',
  data () {
    return {
      activeName: 'first',
      // 是否显示弹框
      dialogFormVisible: false,
      // 表单数据
      form: {
        introduce: '',
        name: '',
        code: '',
        manager: '',
        pid: '' // 父级部门id
      },

      defaultProps: {
        children: 'children',
        label: 'name'
      },
      departs: [
        {
          name: '总裁办',
          manager: '曹操',
          children: [{ name: '董事会', manager: '曹丕' }]
        },
        { name: '行政部', manager: '刘备' },
        { name: '人事部', manager: '孙权' }
      ]
    }
  },
  async created () {
    // const res = await getDepartments()
    // // console.log(res)
    // // 找到所有的
    // const res1 = res.depts.filter(v => v.pid !== '-1')
    // // 找到所有的二级
    // const root = res1.filter(v => v.pid === '')
    // // 遍历所有的二级,,找二级的3级,找所有的pid==2级的id
    // root.forEach(v => {
    //   v.children = res1.filter(vc => vc.pid === v.id)
    // })
    // //  赋值给上面的渲染上去
    // this.departs = root
    // 调用tree结构
    this.getData()
  },

  methods: {
    handleNodeClick (data) {
      // console.log(data)
    },

    async getData () {
      const res = await getDepartments()
      // 调用函数 递归
      this.departs = formatData(res.depts, '')
      // // console.log(res)
      // // 找到所有的
      // const res1 = res.depts.filter(v => v.pid !== '-1')
      // // 找到所有的二级
      // const root = res1.filter(v => v.pid === '')
      // // 遍历所有的二级,,找二级的3级,找所有的pid==2级的id
      // root.forEach(v => {
      //   v.children = res1.filter(vc => vc.pid === v.id)
      // })
      // //  赋值给上面的渲染上去
      // this.departs = root
    },

    // 编辑 查看部门
    async enterEdit (data) {
      // console.log(data)
      const res = await getDepartmentById(data.id)
      this.form = { ...res }
      this.dialogFormVisible = true
    },
    addChildren (data) {
      // id等于新增的pid 这样新增的就是三级
      this.form.pid = data.id
      this.dialogFormVisible = true
    },
    // 取消清空表单
    onCancel () {
      this.form = {
        introduce: '',
        name: '',
        code: '',
        manager: '',
        pid: '' // 父级部门id
      }
      this.dialogFormVisible = false
    },
    // 删除部门
    removeItem (data) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await delDepartmentById(data.id)
          //  重新获取数据
          this.getData()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {})
    }
  }
}
</script>

<style lang="scss">
.departments {
  .el-tabs__content {
    padding: 40px;
    padding-top: 20px;
    h4 {
      margin: 0;
    }
    .linder {
      font-size: 14px;
      margin-right: 20px;
    }
    .right-col {
      text-align: right;
    }
  }
  .el-tree-node__content {
    .row-bg {
      flex: 1;
    }
  }
}
</style>
